<template>
  <div>
    <div class="avatar-wrapper">
      <el-avatar :size="35" :src="data.avatar_url" />
      <span v-if="data.rsvp_status" class="status-icon">
        <template v-if="data.rsvp_status === 'accept'">
          <el-icon color="#35bd4b">
            <SuccessFilled />
          </el-icon>
        </template>
        <template v-else-if="data.rsvp_status === 'decline'">
          <el-icon color="#e4040d">
            <CircleCloseFilled />
          </el-icon>
        </template>
        <template v-else-if="data.rsvp_status === 'tentative'">
          <el-icon color="#303133">
            <QuestionFilled />
          </el-icon>
        </template>
      </span>
    </div>
    <span v-if="isShow" class="ml-[8px]"
      >{{ data.display_name }} ( {{ data.name }} )
    </span>
  </div>
</template>
<script setup>
const props = defineProps({
  data: { type: Object, default: () => {} },
  isShow: { type: Boolean, default: false },
});
</script>
<style scoped lang="scss">
.avatar-wrapper {
  position: relative;
  display: inline-block;
}

.status-icon {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
.status-icon.success {
  color: green;
}
.status-icon.rejected {
  color: red;
}
.status-icon.unknown {
  color: gray;
}
</style>
